<template>
	<view class="order-item" @click="toOrderDerail" >
		<!-- 卖家信息 -->
		<view class="saler-data">
			<view class="user">
				<image :src="orderItem.sellerAvatar" mode=""></image>
			</view>
			<view class="username">
				{{ orderItem.sellerName }}
			</view>
			<view class="dispatch">
				{{ formatStatus(orderItem.status) }}
			</view>
		</view>
		<!-- 商品列表 -->
		<slot></slot>
		<!-- 小计 -->
		<view class="sub-total">
			<view class="computed">
				{{ formatComputeStr(orderItem.orderDetailList) }}
			</view>
			<view v-show="usePath" class="price">
			    <view class="s">
			    	运费:
			    </view>	
				￥12
			</view>
			<view class="price">
			    <view class="s">
			    	实付:
			    </view>	
				￥{{ orderItem.amount }}
			</view>
		</view>
		<!-- 操作 -->
		<view class="tool">
			<view v-show="[0,1,2].includes(orderItem.status)" 
			class="tool-btn error">
				取消订单
			</view>
			<view v-show="[1,2,3].includes(orderItem.status)"
			class="tool-btn success">
				联系卖家
			</view>
			<!-- <view class="tool-btn">
				确
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			orderItem:{
				type:Object,
				default:()=>{
					return {
						id:0,
						userImg:"",
						username:"",
						status:0,
						computeStr:"****",
						totalPrice:"",
						freightNum:0,
						orderDetailList:[]
					}
				}
			},
			usePath:{ // 标记使用的页面 0 order 1 order-detail 2 order-submit
				type:Number,
				default:0
			}
		},
		methods: {
			// 跳转到订单详情
			toOrderDerail(){
				if(this.usePath!=0){
					return;
				}
				// console.log(this.$route.path)
				uni.navigateTo({
					url:`/pages/order/order_detail?id=${this.orderItem.id}`
				})
			},
			
			/**
			 * 发货状态
			 * @param {Object} type 
			 */
			formatStatus(type){
				switch (type){
					case 1:
						return "待付款";
					case 2:
						return "待发货";
					case 3:
						return "派送中";
					case 4:
						return "已完成";
					case 5:
						return "已取消";
					default:
						break;
				}
			},
			
			/**
			 * 格式化计算字符串
			 */
			formatComputeStr(array){
				if(!array) return;
				const arr = [];
				array.forEach((item,i)=>{
					arr.push(`${item.price} x ${item.number}`);
					if(i!=array.length-1){
						arr.push('+');
					}
				})
				arr.push(`+ ${this.orderItem.postAmount}`)
				return arr.join(" ");
			}
		}
	}
</script>

<style lang="less">
	.order-item{
			background-color: #ffffff ;
			padding: 15rpx  10rpx;
			box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
			border-radius: 20rpx;
			margin-bottom: 15rpx;
			
			.saler-data{
				display: flex;
				flex-direction: row;
				padding: 0 10rpx;
				
				.user {
					width: 66rpx;
					height: 66rpx;
					border: 33rpx;
					overflow: hidden;
					z-index: 100;
					
					image {
						width: 66rpx;
						height: 66rpx;
					}
				}
				  
				.username {
					// width: 160rpx;
					width: calc( 100% - 220rpx );
					padding: 0 15rpx;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.dispatch{
					width: 120rpx;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					color: #5ca45b;
				}
			}
	
			.sub-total{
				display: flex;
				flex-direction: column;
				padding: 10rpx 40rpx;
				.computed{
					display: flex;
					flex-direction: row;
					justify-content: right;
					font-size: 28rpx;
					color: #5ca45b;
					// width: 600rpx;
				}
				
				.price{
					display: flex;
					flex-direction: row;
					justify-content: right;
					align-items: center;
					font-size: 36rpx;
					color: #ff5500;
					// width: 300rpx;
					
					.s{
						padding-bottom: 6rpx;
						font-size: 32rpx;
						color:black
					}
				}
			}
			
			.tool{
				display: flex;
				justify-content: right;
				padding: 20rpx 20rpx;
				.tool-btn{
					height: 40rpx;
					padding: 6rpx 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					margin: 0 10rpx;
				}
				.success{
					color: #5ca45b;
					border: 2rpx #5ca45b solid;
				}
				.error{
					color: #ff5500;
					border: 2rpx #ff5500 solid;
				}
			}
		}
</style>
